<template>
    <div>
        <h1>注册</h1>
        <!-- 在组件里面调用vuex -->
        <!-- 调用数据 -->
        <div>
            调用vuex数据:
            num:{{$store.state.num}}
            num奇偶:{{$store.getters.isOdd}}
            <h2>NUM:{{num}} isOdd{{isOdd}}</h2>
        </div>
        <button @click="add(1)">同步 add +1</button>
        <button @click="asyncAdd(3)">异步 add +3</button>
    </div>
</template>

<script>
// 组件里面 一般吧vuex的数据映射成计算属性 mutations和actions函数映射
//成组件的methods
//在组件可以通过 快捷函数 mapState mapGetters mapMutations,mapActions
//吧 vuex里面数据 和 方法快捷映射成计算属性和methods方法
import { mapState,mapGetters,mapMutations,mapActions } from 'vuex';    
export default {
        computed:{
            ...mapState(["num"]),//返回的是一个对象所以展开存储在computed里面
            // num(){
            //     return this.$store.state.num
            // },
            ...mapGetters(["isOdd"])
            // isOdd(){
            //     return this.$store.getters.isOdd
            // }
        },
        methods:{
            ...mapMutations(["add"]),
            // add(){
            //     //用commit提交mutations
            //     this.$store.commit("add",1);
            // },
            ...mapActions(["asyncAdd"])
            // asyncAdd(){
            //     //调用vuex里面actions函数用 dispatch分发
            //     this.$store.dispatch("asyncAdd",3);
            // }
        }
    }
</script>

<style lang="scss" scoped>

</style>